<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap core CSS -->
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../bootstrap-3.3.7/dist/css/bootstrap-theme.min.css" />
<link rel="stylesheet" type="text/css"
	href="../../css/bootstrap-datetimepicker.min.css" />
<link rel="stylesheet" type="text/css" href="../../css/index.css" />
<link rel="stylesheet" type="text/css" href="../../css/personal.css" />
<link rel="stylesheet" type="text/css" href="../../css/background.css" />

<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/jquery.min.js"></script>
<script type="text/javascript"
	src="../../bootstrap-3.3.7/dist/js/bootstrap.js"></script>
<!-- bootstrap表格插件 -->
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table.js"></script>
<link href="../../bootstrap-3.3.7/dist/css/bootstrap-table.css"
	rel="stylesheet" />
<script src="../../bootstrap-3.3.7/dist/js/bootstrap-table-zh-CN.js"></script>
<script src="../../js/moment-with-locales.js"></script>

<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link
	href="../../bootstrap-3.3.7/docs/assets/css/ie10-viewport-bug-workaround.css"
	rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

<script src="../../js/bootstrap-datetimepicker.min.js"></script>
<script src="../../js/bootstrap-datetimepicker.zh-CN.js"></script>
</head>
<body>
	<h4 class="heading">上传数目统计</h4>
	<div class="myline"></div>
	<div class="col-md-12">
		<div class="col-md-12" style="margin-top: 5px; margin-left: 0px">
			<div class="form-group" style="margin-left: 0px">
				<label  class="col-md-2 control-label">
				<span style="float: right; margin-top: 5px;">手机号</span></label>
				<div class="col-md-10">
					<div class="col-md-4" style="margin-left: 0px">
						<input type="text" class="form-control" id="userid" name="userid" >
					</div>
					<div class="col-md-2" style="margin-left:0px">
						<span style="color: red;">必填</span>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12" style="margin-top: 5px; margin-left: 0px;">
			<div class="form-group" style="margin-left: 0px">
				<label class="col-md-2 control-label" style="float:left">
				<span style="float: right; margin-top: 5px;">库类别</span></label>
				<div class="col-md-10" id="ku"></div>
			</div>
		</div>
		<div class="col-md-12" style="margin-top: 5px; margin-left: 0px;">
			<div class="form-group" style="margin-left: 0px">
				<label class="col-md-2 control-label">
					<span style="float: right; margin-top: 5px;">类型</span>
				</label>
				<div class="col-md-10">
					<div class="col-md-3" id="style3">
						<select class="combobox" id="staticanalytime"
							style="height: 30px; width: 100%; float: left">
							<option value="day">按日</option>
							<option value="month">按月</option>
							<option value="year">按年</option>
						</select>
					</div>
				</div>
			</div>
		</div>
		<div class="col-md-12" style="margin-top: 5px; margin-left: 0px;">
			<div class="form-group" style="margin-left: 0px;">
				<label class="col-md-2 control-label">
					<span style="float: right; margin-top: 5px;">时间</span>
				</label>
				<div class="col-md-10">
					<div class="col-md-4 day">
						<a class='input-group date' id='datetimestart_day'> <input
							type='text' class="form-control" id='startdate_day' /> <span
							class="input-group-addon" style="width: 50px;"> <span
								class="glyphicon glyphicon-calendar"></span>
						</span>
						</a>
					</div>

					<div class="col-md-4 month" hidden="true">
						<a class='input-group date' id='datetimestart_month'> <input
							type='text' class="form-control" id='startdate_month' /> <span
							class="input-group-addon" style="width: 50px;"> <span
								class="glyphicon glyphicon-calendar"></span>
						</span>
						</a>
					</div>

					<div class="col-md-4 year" hidden="true">
						<a class='input-group date' id='datetimestart_year'> <input
							type='text' class="form-control" id='startdate_year' /> <span
							class="input-group-addon" style="width: 50px;"> <span
								class="glyphicon glyphicon-calendar"></span>
						</span>
						</a>
					</div>
					<div style="float: left">--</div>
					<div class="col-md-4 day">
						<a class='input-group date' id='datetimeend_day'> <input
							type='text' class="form-control" id='enddate_day' /> <span
							class="input-group-addon" style="width: 50px;"> <span
								class="glyphicon glyphicon-calendar"></span>
						</span>
						</a>
					</div>
					<div class="col-md-4 month" hidden="true">
						<a class='input-group date' id='datetimeend_month'> <input
							type='text' class="form-control" id='enddate_month' /> <span
							class="input-group-addon" style="width: 50px;"> <span
								class="glyphicon glyphicon-calendar"></span>
						</span>
						</a>
					</div>
					<div class="col-md-4 year" hidden="true">
						<a class='input-group date' id='datetimeend_year'> <input
							type='text' class="form-control" id='enddate_year' /> <span
							class="input-group-addon" style="width: 50px;"> <span
								class="glyphicon glyphicon-calendar"></span>
						</span>
						</a>
					</div>
					<div class="col-md-1" style="text-align: left;">
						<button type="button" style="margin-left: 10px" id="btn_query"
							class="btn btn-primary">统计结果</button>
					</div>
				</div>


			</div>
		</div>


		<div class="col-md-12">
			<table id="tb_departments">
			</table>
		</div>
	</div>
</body>
<script type="text/javascript">
	var count = 0;
	//html_id为HTML页面上要添加位置的ID
	function KuBindNew(html, html_id, level, pId) {
		//清空下拉数据		
		for (var x = level; x <= count; x++) {
			$("#" + html + x).remove();
		}
		var str = "";
		$
				.ajax({
					type : "POST",
					url : "../configration/getReczsk",
					data : {
						"id" : "",
						"pId" : pId,
						"name" : "",
						"value" : "",
						"level" : level
					},
					dataType : "JSON",
					async : false,
					success : function(data) {
						if (data.length != 0) {
							str += '<div id='+html+level+' class="col-md-3"><select id='
									+ html_id
									+ level
									+ ' name="kulist" style="height: 30px; width: 100%; float: left">';
							//从服务器获取数据进行绑定
							str += "<option value='all'>全部</option>";
							$.each(data, function(i, item) {
								str += "<option value=" + item.id + ">"
										+ item.name + "</option>";
							})
							str += "</select></div>";
							//将数据添加到省份这个下拉框里面
							$("#" + html_id).append(str);
							count++;
						}
					},
					error : function() {
						alert("Error");
					}
				});
	}
	function dynamicBindNew(html, html_id, level) {
		for (var i = level; i <= count; i++) {
			(function(m) {
				$("#" + html_id + m).change(
						function() {
							KuBindNew(html, html_id, m + 1,
									$("#" + html_id + m).val());
							dynamicBindNew(html, html_id, m + 1);
						});
			})(i);
		}
	}
	$(function() {
		//初始化时间控件
		datetimebyDay();
		datetimebyMonth();
		datetimebyYear();

		//初始化动态库标签内容
		KuBindNew("kudiv", "ku", 1, "");
		dynamicBindNew("kudiv", "ku", 1);

		//1.初始化Table
		var oTable = new TableInit();
		oTable.Init();

		//2.初始化Button的点击事件
		var oButtonInit = new ButtonInit();
		oButtonInit.Init();

		//根据按月、按年
		$("#staticanalytime").change(function() {
			if ($("#staticanalytime").val() == 'day') {
				$('.day').show();
				$('.month').hide();
				$('.year').hide();

			} else if ($("#staticanalytime").val() == 'month') {
				$('.day').hide();
				$('.month').show();
				$('.year').hide();

			} else if ($("#staticanalytime").val() == 'year') {
				$('.day').hide();
				$('.month').hide();
				$('.year').show();
			}
		});
	});
	var TableInit = function() {
		var oTableInit = new Object();
		//初始化Table
		oTableInit.Init = function() {
			$('#tb_departments').bootstrapTable({
				url : '../staticanaly/getInformationByUpload', //请求后台的URL（*）
				method : 'get', //请求方式（*）
				toolbar : '#toolbar', //工具按钮用哪个容器
				striped : true, //是否显示行间隔色
				cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
				pagination : true, //是否显示分页（*）
				sortable : true, //是否启用排序
				sortOrder : "asc", //排序方式
				queryParams : oTableInit.queryParams,//传递参数（*）
				sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
				pageNumber : 1, //初始化加载第一页，默认第一页
				pageSize : 10, //每页的记录行数（*）
				pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
				search : false, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
				strictSearch : true,
				showColumns : true, //是否显示所有的列
				showRefresh : true, //是否显示刷新按钮
				minimumCountColumns : 2, //最少允许的列数
				clickToSelect : true, //是否启用点击选中行
				height : 650, //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
				uniqueId : "rule_type", //每一行的唯一标识，一般为主键列
				showToggle : true, //是否显示详细视图和列表视图的切换按钮
				cardView : false, //是否显示详细视图
				detailView : false, //是否显示父子表
				columns : [ {
					field : 'info_name',
					title : '篇名',
					width : '40%'
				}, {
					field : 'info_author',
					title : '作者',
					width : '15%'
				}, {
					field : 'info_bm',
					title : '发布部门',
					width : '25%'
				}, {
					field : 'info_source',
					title : '文献来源',
					width : '15%'
				}, {
					field : 'info_download',
					title : '下载',
					width : '5%'
				} ]
			});
		};
		//得到查询的参数
		oTableInit.queryParams = function(params) {

			//获取当前想要统计的库
			var kulist = $("select[name='kulist'] option:selected");
			var kudata;
			var type;
			if (kulist[kulist.length - 1].value == "all" && kulist.length > 1) {
				kudata = kulist[kulist.length - 2].value;
				type = "all";
			}
			if (kulist[kulist.length - 1].value == "all" && kulist.length <= 1) {
				kudata = "all";
				type = "all";
			}
			if (kulist[kulist.length - 1].value != "all") {
				kudata = kulist[kulist.length - 1].value;
				type = "noall";
			}
			var startdate;
			var enddate;
			var way = $("#staticanalytime").val();
			if (way == 'day') {
				startdate = $("#startdate_day").val();
				enddate = $("#enddate_day").val();
			} else if (way == 'month') {
				startdate = $("#startdate_month").val();
				enddate = $("#enddate_month").val();
			} else if (way == 'year') {
				startdate = $("#startdate_year").val();
				enddate = $("#enddate_year").val();
			}

			var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的			
				offset : params.offset, //页码初始开始值
				limit : params.limit, //页面大小
				ku : kudata,
				userid : $("#userid").val(),
				way : way,
				starttime : startdate,
				endtime : enddate,
			};
			return temp;
		};
		return oTableInit;
	};

	var ButtonInit = function() {
		var oInit = new Object();
		oInit.Init = function() {
			//初始化页面上面的按钮事件
			$('#btn_query').bind('click', function() {
				$('#tb_departments').bootstrapTable('refreshOptions', {
					pageNumber : 1
				});
			});
		};
		return oInit;
	};

	function datetimebyDay() {
		$('#datetimestart_day').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm-dd',//显示格式
			startView : 2,//打开之后首先选择的视图
			minView : 2,//设置只显示到月份
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});
		$('#datetimeend_day').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm-dd',//显示格式
			minView : 2,//设置只显示到月份
			startView : 2,
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});

	}
	function datetimebyMonth() {
		$('#datetimestart_month').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm',//显示格式
			startView : 3,//打开之后首先选择的视图
			minView : 3,//设置只显示到月份
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});
		$('#datetimeend_month').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy-mm',//显示格式
			minView : 3,//设置只显示到月份
			startView : 3,
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});

	}
	function datetimebyYear() {
		$('#datetimestart_year').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy',//显示格式
			startView : 4,//打开之后首先选择的视图
			minView : 4,//设置只显示到月份
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});
		$('#datetimeend_year').datetimepicker({
			language : 'zh-CN',//显示中文
			format : 'yyyy',//显示格式
			minView : 4,//设置只显示到月份
			startView : 4,
			initialDate : new Date(),
			autoclose : true,//选中自动关闭
			todayBtn : true,//显示今日按钮
			locale : moment.locale('zh-cn')
		});

	}
</script>
</html>